<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>主页面</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
</head>
<body>
<div id="app" style="height: 100%">
    <el-container style="height: 130px; border: 1px solid #eee">
        <el-header style="text-align: left; font-size: 20px">
            <h1>OneERP系统</h1>
        </el-header>
        <!--顶部菜单-->
        <el-header style="text-align: right; font-size: 20px">
            <el-dropdown>
                <i class="el-icon-setting" style="margin-right: 20px"></i>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item><span @click="logOut()">退出</span></el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <span>{{nameu}}</span>
        </el-header>
    </el-container>
    <el-container>
        <!--左侧导航-->
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
            <el-menu v-for="fun1 in funs" :key="fun1.id">
                <el-submenu :index="fun1.id" v-if="fun1.menuPid==0">
                    <template slot="title" v-if="fun1.menuPid==0">{{fun1.menuName}}</template>
                    <el-menu-item-group v-if="funb1.menuPid==fun1.id" v-for="funb1 in funs" :key="funb1.id+2">
                        <el-menu-item index="funb1.id+2" v-if="funb1.menuPid==fun1.id">
                            <!--超链接的target是跳转的目标，设置为iframe的name-->
                            <i class="el-icon-folder"></i>
                            <a  :href="menuUrl" @click="hrefList(funb1.menuUrl)" target="main">{{funb1.menuName}}</a>
                        </el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </el-menu>
        </el-aside>
        <!--右侧列表-->
        <el-main>
            <iframe src="/index.html" style="width: 100%;height:100%; border: 0px" name="main"></iframe>
        </el-main>
    </el-container>

</div>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios/axios.min.js"></script>
<script src="/js/qs/qs.min.js"></script>
<script src="/js/elementui/index.js"></script>
<style>

    a:link,a:visited{
        text-decoration: none;
        color: black;
    }
    .ahover:hover{
        color: red;
    }
    .el-header {
        background-color: #66b1ff;
        color: #333;
        line-height: 20px;
    }

    .el-aside {
        color: #333;
    }
</style>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                funs: null,
                menuUrl: "",
                nameu:''
            }
        },
        methods: {
            hrefList(menuUrl) {
                if (menuUrl != "") {
                    var strings = menuUrl.split('"');
                    console.log(strings)
                    this.menuUrl = strings[0];
                }
            },
            logOut(){
                axios.get("/logout1").then(value => {
                });
                location.href="/login"
            }
        },
        mounted() {
            axios.get("/menus").then(value => {
                this.funs = value.data
                console.log(value.data)
            });
            axios.get("/menusName").then(value => {
                this.nameu=value.data

            })
        }

    });

</script>
</body>
</html>